import './SetStartData.scss'

import { v4 } from 'uuid'
import { useState } from 'react'
import { useEventEmitter } from 'ahooks'
import { Tree, Button, Popconfirm } from 'antd'


import { FormTempMapping } from '../../Utils/FormTemp'
import { StartConfig } from '../../Config/StartConfig'
import { onTreeDrop, replaceNodeById, removeTreeByKey } from '../../Utils'
import { modelStore } from '../../Config/zustand'

const SetStartData = ({ data }) => {
    const { updateModel } = modelStore()
    const { type, StartEvent, config } = data

    if (type === 'A01') {
        const FORMEVENT = useEventEmitter()
        FORMEVENT.useSubscription(val => {
            const { type, data } = val
            if (type === 'onFormBack') StartEvent.emit({ type: 'onChangeBack', data: data })
        })
        return (
            <div className='SetStartData A01'>
                <FormTempMapping formItem={StartConfig.BackConfigData} FORMEVENT={FORMEVENT} Initial={config} NotLoading />
            </div>
        )
    }
    if (type === 'A02') {
        const [loading, setLoading] = useState(false)
        const [TreeData, setTreeData] = useState(config.routerConfig)

        const RouterEvent = useEventEmitter()

        const onAdd = () => updateModel({ type: 'AddFormData', width: 640, title: '新增路由', data: { type: 'AddStartRouter', AddEvnet: RouterEvent } })
        const onModify = e => updateModel({ type: 'AddFormData', width: 640, title: '修改路由', data: { type: 'AddStartRouter', AddEvnet: RouterEvent, Initial: e } })

        const onDelete = e => {
            const data = removeTreeByKey(TreeData, e.uuid)
            setTreeData(data)
            config.routerConfig = data
            onSave()
        }


        const onUpdata = (data) => {
            const arr = data.uuid ? replaceNodeById(TreeData, data.uuid, data) : [...TreeData, { ...data, uuid: v4() }]
            config.routerConfig = arr
            setTreeData(arr)
            onSave()
            RouterEvent.emit({ type: 'closeForm' })
        }

        const onSave = () => {
            StartEvent.emit({ type: 'onSaveConfig', data: config })
        }


        const CallBackFunc = (e) => {
            const { type, data } = e
            // console.log(type, data)
            const MapReturn = new Map([
                ['onFormBack', () => onUpdata(data)],
            ])
            const func = MapReturn.get(type)
            return func && func()
        }

        RouterEvent.useSubscription(CallBackFunc)

        return (
            <div className='SetStartData A02'>
                <Tree
                    draggable
                    blockNode
                    onDrop={e => {
                        const data = onTreeDrop(e, TreeData, 'uuid')
                        config.routerConfig = data
                        setTreeData(data)
                        onSave()
                    }}
                    selectable={false}
                    treeData={TreeData}
                    defaultExpandAll
                    fieldNames={{ key: 'uuid', title: 'router_name' }}
                    titleRender={e => {
                        return (
                            <div className='A02__Tree'>
                                <div>
                                    <div>{e.router_name}</div>
                                    <div>{e.router_type === 'path' ? '页面' : '链接'} {e.router_path}</div>
                                </div>
                                <div>
                                    <Button type='link' onClick={() => onModify(e)}>编辑</Button>
                                    <Popconfirm
                                        title="删除提醒!"
                                        description="是否要删除当前数据?"
                                        onConfirm={() => onDelete(e)}
                                        okText="删除"
                                        cancelText="取消"
                                    >
                                        <Button type='link' danger >删除</Button>
                                    </Popconfirm>

                                </div>
                            </div>
                        )
                    }}
                />
                <Button type='primary' onClick={onAdd} loading={loading}>添加路由</Button>
            </div>
        )
    }

    return <div>SetStartData - 未配置类型{type}</div>
};

export default SetStartData;